// 首页css样式
@import 'common';

// body样式
body{
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f2f2f2;
}

ul ol {
  list-style: none;
}

//后续尺寸使用rem尺寸
//top-banner区域
@baseFont: 50px;
.top-banner{
  position: relative;
  width: 750rem / @baseFont;
  height: 100rem / @baseFont;
  .top-banner-img{
    display: block;
    width: 100%;
    height: 100%;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .close {
    position: absolute;
    left: 0.1rem;
    top: 0.5rem;
    width: 50rem / @baseFont;
    height: 50rem / @baseFont;
    background: url(../img/close.png) no-repeat center center;
    background-size: 30rem / @baseFont auto; 
  }
} 

// header区域
.header{
  width: 750rem /@baseFont;
  height: 180em / @baseFont;
  background-color: #ffdb47;
  .header-top{
    display: flex;
    width: 682rem / @baseFont;
    height: 88rem / @baseFont;
    padding: 0 34rem /@baseFont;
    justify-content: space-between;
    align-items: center;
    .classify {
      img{
        display: block;
        width: 36rem / @baseFont;
        height: 60rem / @baseFont;
      }
    }
    .ad{
      img{
        display: block;
        width: 450rem /@baseFont;
        height: 55rem / @baseFont;
      }
    }
    .login{ 
      img{
        display: block;
        width: 36rem /@baseFont;
        height: 60rem / @baseFont;
      }
    }
  }
  .search{ 
    position: relative;
    width: 750rem / @baseFont;
    height: 92rem /@baseFont;
    padding: 0 24em / @baseFont;
    box-sizing: border-box;
    a{
      position: absolute;
      top: 0;
      left: 24rem /@baseFont;
      width: 702rem / @baseFont;
      height: 88rem / @baseFont;
    }
    i{
      position: absolute;
      left: 42rem / @baseFont;
      top:26rem / @baseFont;
      width: 36rem /@baseFont;
      height: 36rem / @baseFont;
      background: url(../img/search_btn.png) no-repeat 0 0;
      background-size: 36rem / @baseFont;
    }
    form{
      display: flex;
      align-items: center;
      width: 702rem / @baseFont; 
      height: 88rem / @baseFont;
      input{
        width: 702rem/ @baseFont;
        height: 64rem / @baseFont;
        padding: 3rem/@baseFont 20rem/@baseFont 0 65rem/@baseFont;
        box-sizing: border-box;
        border-radius: 32rem / @baseFont;
        font-size: 0.56rem;
        border: 0;
        line-height: 64rem / @baseFont;
      }
    } 
  }
}

.banner{
  position: relative;
  width: 750rem / @baseFont;
  height: 260rem / @baseFont;
  background: url(../img/banner_bg.png) no-repeat 0 0;
  background-size: 750rem / @baseFont;
  .wrapper{
    position: relative;
    width: 702rem/ @baseFont;
    height: 260rem / @baseFont;
    margin:  0 auto;
    overflow: hidden;
    ul{ 
      position: relative;
      width: 2000rem / @baseFont;
      height: 260rem / @baseFont;
      margin: 0;
      li {
        position: absolute;
        left: 702rem / @baseFont;
        top: 0;
        border-radius: 24rem / @baseFont;
        height: 260rem / @baseFont;
        overflow: hidden;
        &.current{
          left: 0;
        }
        img{
          width: 702rem / @baseFont;
          height: 260rem / @baseFont;
        }
      }
    }
  }
  .cycle{
    position: absolute;
    left: 0;
    padding-left: 40rem / @baseFont;
    margin:  0 auto; 
    bottom: 20rem / @baseFont ;
    width: 702rem / @baseFont;
    height: 10rem / @baseFont;
    display: flex;
    justify-content: center;
    align-items: center;
    li{
      float: left;
      width: 0.3rem;
      height: 0.16rem;
      list-style: none;
      &.current{
        width: 0.4rem;
        i{
          width: 0.3rem;
          background-color: #fff;
        }
      }
      i{
        display: block;
        width: 0.16rem;
        height: 0.16rem;
        border-radius: 0.16rem;
        background: rgba(0, 0, 0, 0.3);
      }
    }
  } 
}

.goodsIntro{
  width: 100%;
  display: flex;
  height: 4rem;
  a{
    flex: 1;
    height: 4rem;
    img{
      flex: 1;
      height: 4rem;
    }
  }
}

// nav
.nav{
  width: 750rem /@baseFont;
  height: 308rem / @baseFont;
  a{
    float: left;
    width: 150rem / @baseFont;
    height: 142rem / @baseFont;
    text-decoration: none;
    color: #666;
    font-size: 22rem / @baseFont;
    img{
      display: block;
      width: 84rem / @baseFont;
      height: 84rem / @baseFont;
      margin: 24rem / @baseFont 33rem / @baseFont 0;
    }
    p{
      height: 28rem / @baseFont;
      line-height: 28rem / @baseFont;
      margin-top:  5rem / @baseFont;
      text-align: center;
    }
  }
}

.newPeople{
  display: flex;
  width: 750rem / @baseFont;
  height: 234rem / @baseFont;
  box-sizing: border-box;
  padding-left: 10rem / @baseFont;
  div{
    flex: 1;
    height: 234rem / @baseFont;
    display: flex;
    a{
      flex: 1;
      display: flex;
      img{
        flex: 1;
        height: 234rem / @baseFont; 
      }
    }
  }
}
